<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align: center">添加文章</h3>

				<el-form ref="form" :model="form" label-width="100px" style="width: 100%; margin: 0 auto">
					<el-form-item label="分类">
						<el-select v-model="form.catid">
							<el-option :key="0" :value="0" label="请选择">请选择</el-option>
							<el-option :key="item.catid" :value="item.catid" :label="item.catname"
								v-for="item in category_select">{{
                  "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(item.lev) +
                  "┖─&nbsp;" +
                  item.catname
                }}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="标题">
						<el-input type="text" v-model="form.title"></el-input>
					</el-form-item>

					<el-form-item label="内容">
						<!-- <lRichTextEditor v-model="form.content" @change="GetChange"></lRichTextEditor> -->
						<TinymceEditor v-model="form.content" :init="$tinymce.config()"></TinymceEditor>
					</el-form-item>

					<el-form-item label="缩略图">
						<el-upload class="avatar-uploader" :action="$config.axios_baseURL+'/api/upload/upload_image'"
							:show-file-list="false" :on-success="handleSuccess" :on-error="handleError"
							:headers="set_header()" :data="{ moduleid: '11', uniq: '12345' }">
							<img v-if="form.thumb" :src="form.thumb" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="danger" @click="handleRemove" size="small">删除</el-button>
					</el-form-item>

					<el-form-item label="状态">
						<el-select v-model="form.flag">
							<el-option v-for="item in $core_enums('flag')" :key="item.key" :label="item.value"
								:value="item.key"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	import Cookies from 'js-cookie';
	export default {
		async onLoad(query) {
			let data = await this.$axios.post("/api/article/category_lst", {});
			this.category_select = data.data;
		},
		data() {
			return {
				form: {
					catid: 0,
					title: "",
					content: "",
					thumb: "",
					flag: "1",
				},
				category_select: [],
			};
		},
		async mounted() {},
		methods: {
			GetChange(e) {
				this.form.content = e;
			},
			set_header() {
				return {
					Authorization: JSON.stringify({
						auth: Cookies.get("auth"),
						userid: Cookies.get("userid"),
						username: Cookies.get("username"),
						groupid: Cookies.get("groupid"),
						rsa_token: this.$encryption(),
					}),
				};
			},
			handleSuccess(res, file) {
				this.form.thumb = res.data.url;
			},
			handleError(error, file) {
				console.log(error, file);
				this.$message.error(error.toString());
			},
			handleRemove() {
				this.form.thumb = "";
			},
			async onSubmit() {
				if (!this.form.catid) {
					this.$message({
						type: "error",
						message: "所属分类不能为空",
					});
					return;
				}
				if (!this.form.title) {
					this.$message({
						type: "error",
						message: "标题不能为空",
					});
					return;
				}
				if (!this.form.content) {
					this.$message({
						type: "error",
						message: "内容不能为空",
					});
					return;
				}
				if (!this.form.flag) {
					this.$message({
						type: "error",
						message: "状态不能为空",
					});
					return;
				}

				try {
					let data = await this.$axios.post("/api/article/add", this.form);
					if (parseInt(data.code) > 0) {
						this.$message({
							message: data.msg,
							type: "success",
							duration: 1000,
						});
						setTimeout(() => {
							location.reload();
						}, 1000);
					} else {
						this.$message.error(data.msg);
					}
				} catch (error) {
					this.$message.error(error.toString());
				}
			},
		},
	};
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {

		color: #333;

	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}

	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}
</style>
